//- Copyright (C) 2018-2022 Chatopera Inc, <https://www.chatopera.com>
//- 
//- Licensed under the Apache License, Version 2.0 (the "License");
//- you may not use this file except in compliance with the License.
//- You may obtain a copy of the License at
//- 
//-  http://www.apache.org/licenses/LICENSE-2.0
//- 
//-  Unless required by applicable law or agreed to in writing, software
//- distributed under the License is distributed on an "AS IS" BASIS,
//-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
//- See the License for the specific language governing permissions and
//- limitations under the License.
extends /admin/include/layout.pug

block content
    include head

    .layui-tab
        .layui-tab-content
            .layui-tab-item.layui-show
                form.layui-form(method="post", key="set-mine", enctype="multipart/form-data", action="/admin/webim/save.html")
                    include hidden
                    .row
                        .col-lg-12
                            .ukefu-customer-div.setting-wrapper
                                .box.default-box
                                    .box-header
                                        h3.box-title 接入代码
                                    .box-body
                                        .ukefu-webim-tip= '请将以下代码添加到你的网站 HTML源代码中，放在<head></head>标签之间.'
                                        textarea.ukefu-webim-sdk(readonly="readonly")
                                            if inviteData
                                                | <script defer="true" src="#{schema}://#{hostname}:#{port}/im/#{inviteData.snsaccountid}.html"></script>
                                .box.default-box
                                    .box-header
                                        h3.box-title 文字链代码
                                    .box-body(style="padding-top:5px;")
                                        .layui-tab.layui-tab-card
                                            ul.layui-tab-title
                                                li.layui-this 文字链代码
                                            .layui-tab-content
                                                .layui-tab-item.layui-show
                                                    .ukefu-webim-tip 请将以下代码添加到你的网站 链接代码上，可以自由定义链接的内容形式
                                                    textarea.ukefu-webim-sdk(readonly="readonly")
                                                        if inviteData
                                                            | #{schema}://#{hostname}:#{port}/im/text/#{inviteData.snsaccountid}.html
                                                if inviteData.skill == true && inviteData.consult_skill_fixed == false
                                                    for skill in skillGroups
                                                        .layui-tab-item
                                                            .ukefu-webim-tip 技能组“#{skill.name}”文字连接，你可以复制此链接，并可以自由定义链接的内容形式
                                                            .ukefu-webim-tip
                                                                .layui-tab.layui-tab-brief(lay-filter="docDemoTabBrief")
                                                                    ul.layui-tab-title
                                                                        li.layui-this #{skill.name}
                                                                        for agent in agentList
                                                                            if agent.organ == skill.id
                                                                                li(title=agent.name)= agent.username
                                                                    .layui-tab-content
                                                                        .layui-tab-item.layui-show
                                                                            textarea.ukefu-webim-sdk(readonly="readonly")
                                                                                if inviteData
                                                                                    | #{schema}://#{hostname}:#{port}/im/text/#{inviteData.snsaccountid}.html?skill=#{skill.id}
                                                                        for agent in agentList
                                                                            if agent.organ == skill.id
                                                                                .layui-tab-item
                                                                                    textarea.ukefu-webim-sdk(readonly="readonly")
                                                                                        | #{schema}://#{hostname}:#{port}/im/text/#{inviteData.snsaccountid}.html?skill=#{skill.id}&agent=#{agent.id}

                                .box.default-box
                                    .box-header
                                        h3.box-title 访客对话入口样式
                                    .box-body.ukefu-im-theme
                                        .row(style="margin-right:0px;")
                                            .col-md-8
                                                .ukefu-webim-tl 1、访客入口样式
                                                .box-item
                                                    input#consult_vsitorbtn_model(type="hidden", name="consult_vsitorbtn_model", value=(inviteData.consult_vsitorbtn_model ? inviteData.consult_vsitorbtn_model : 1))
                                                    .ukefu-im-point(class={'ukefu-point-checked': !inviteData.consult_vsitorbtn_model || inviteData.consult_vsitorbtn_model == '1'}, data-class="ukefu-point-theme1", data-value="1")
                                                        .ukefu-point-theme1(style="text-align:center;")
                                                            .ukefu-im-point-text
                                                                i.layui-icon 
                                                                br
                                                                |  在线客服
                                                        .ok
                                                            i.layui-icon 
                                                    .ukefu-im-point(class={'ukefu-point-checked': inviteData.consult_vsitorbtn_model == '2'}, data-class="ukefu-point-theme2", data-value="2")
                                                        .ukefu-point-theme2
                                                            .ukefu-im-point-text
                                                                i.layui-icon 
                                                                br
                                                                | 在线客服
                                                        .ok
                                                            i.layui-icon 
                                                    .ukefu-im-point(class={'ukefu-point-checked': inviteData.consult_vsitorbtn_model == '3'}, data-class="ukefu-point-theme3", data-value="3")
                                                        .ukefu-point-theme3
                                                            .ukefu-im-point-text
                                                                i.layui-icon 
                                                                br
                                                                | 在线客服
                                                        .ok
                                                            i.layui-icon 
                                                    .ukefu-im-point(class={'ukefu-point-checked': inviteData.consult_vsitorbtn_model == '9'}, data-class="ukefu-point-theme9", data-value="9")
                                                        .ukefu-point-theme9
                                                            .ukefu-im-point-text
                                                                br
                                                                | 无
                                                        .ok
                                                            i.layui-icon 
                                                .ukefu-webim-tl(style="clear:both;") 2、选择入口颜色
                                                .box-item
                                                    input#consult_vsitorbtn_color(type="hidden", name="consult_vsitorbtn_color", value=(inviteData.consult_vsitorbtn_color ? inviteData.consult_vsitorbtn_color : 1))
                                                    .item-cnt.ukefu-im-ping-color(style="display: block;")
                                                        .ukefu-im-item.theme1(class={'ukefu-im-checked': !inviteData.consult_vsitorbtn_color || inviteData.consult_vsitorbtn_color == '1'} , data-class="theme1", data-value="1")
                                                            i.layui-icon.ukefu-im-check 
                                                        .ukefu-im-item.theme2(class={'ukefu-im-checked': inviteData.consult_vsitorbtn_color == '2'}, data-class="theme2", data-value="2")
                                                            i.layui-icon.ukefu-im-check 
                                                        .ukefu-im-item.theme3(class={'ukefu-im-checked': inviteData.consult_vsitorbtn_color == '3'}, data-class="theme3", data-value="3")
                                                            i.layui-icon.ukefu-im-check 
                                                        .ukefu-im-item.theme4(class={'ukefu-im-checked': inviteData.consult_vsitorbtn_color == '4'}, data-class="theme4", data-value="4")
                                                            i.layui-icon.ukefu-im-check 
                                                        .ukefu-im-item.theme5(class={'ukefu-im-checked': inviteData.consult_vsitorbtn_color == '5'}, data-class="theme5", data-value="5")
                                                            i.layui-icon.ukefu-im-check 
                                                        .ukefu-im-item.theme6(class={'ukefu-im-checked': inviteData.consult_vsitorbtn_color == '6'}, data-class="theme6", data-value="6")
                                                            i.layui-icon.ukefu-im-check 
                                                .ukefu-webim-tl(style="clear:both;") 3、选择入口按钮位置
                                                .box-item
                                                    input#consult_vsitorbtn_position(type="hidden", name="consult_vsitorbtn_position", value=(consult_vsitorbtn_position ? consult_vsitorbtn_position : 'right,middle'))
                                                    .item-cnt.ukefu-im-position(style="display: block;")
                                                        a(href="javascript:void(0)", onclick="$('#ukefu-point-theme').attr('style' , 'left:10px;top:10px;position: absolute;margin-top:0px;');$('.ukefu-pos').removeClass('ukefu-pos-checked');$(this).children().first().addClass('ukefu-pos-checked');$('#consult_vsitorbtn_position').val('left,top');")
                                                            .ukefu-pos(class={'ukefu-pos-checked': inviteData.consult_vsitorbtn_position == 'left,top'}, style="left:-40px;top:0px;") 左上
                                                        a(href="javascript:void(0)", onclick="$('#ukefu-point-theme').attr('style' , 'left:10px;top:70px;position: absolute;margin-top:0px;');$('.ukefu-pos').removeClass('ukefu-pos-checked');$(this).children().first().addClass('ukefu-pos-checked');$('#consult_vsitorbtn_position').val('left,middle');")
                                                            .ukefu-pos(class={'ukefu-pos-checked': inviteData.consult_vsitorbtn_position == 'left,middle'}, style="left:-40px;top:70px;") 左中
                                                        a(href="javascript:void(0)", onclick="$('#ukefu-point-theme').attr('style' , 'left:10px;bottom:10px;position: absolute;margin-top:0px;');$('.ukefu-pos').removeClass('ukefu-pos-checked');$(this).children().first().addClass('ukefu-pos-checked');$('#consult_vsitorbtn_position').val('left,bottom');")
                                                            .ukefu-pos(class={'ukefu-pos-checked': inviteData.consult_vsitorbtn_position == 'left,bottom'}, style="left:-40px;bottom:0px;") 左下
                                                        a(href="javascript:void(0)", onclick="$('#ukefu-point-theme').attr('style' , 'right:10px;top:10px;position: absolute;margin-top:0px;');$('.ukefu-pos').removeClass('ukefu-pos-checked');$(this).children().first().addClass('ukefu-pos-checked');$('#consult_vsitorbtn_position').val('right,top');")
                                                            .ukefu-pos(class={'ukefu-pos-checked': inviteData.consult_vsitorbtn_position == 'right,top'}, style="right:-40px;top:0px;") 右上
                                                        a(href="javascript:void(0)", onclick="$('#ukefu-point-theme').attr('style' , 'right:10px;top:70px;position: absolute;margin-top:0px;');$('.ukefu-pos').removeClass('ukefu-pos-checked');$(this).children().first().addClass('ukefu-pos-checked');$('#consult_vsitorbtn_position').val('right,middle');")
                                                            .ukefu-pos(class={'ukefu-pos-checked': !inviteData.consult_vsitorbtn_position || inviteData.consult_vsitorbtn_position == 'right,middle'}, style="right:-40px;top:70px;") 右中
                                                        a(href="javascript:void(0)", onclick="$('#ukefu-point-theme').attr('style' , 'right:10px;bottom:10px;position: absolute;margin-top:0px;');$('.ukefu-pos').removeClass('ukefu-pos-checked');$(this).children().first().addClass('ukefu-pos-checked');$('#consult_vsitorbtn_position').val('right,bottom');")
                                                            .ukefu-pos(class={'ukefu-pos-checked': inviteData.consult_vsitorbtn_position == 'right,bottom'}, style="right:-40px;bottom:0px;") 右下
                                                .ukefu-webim-prop
                                                    .ukefu-webim-tl(style="clear:both;") 4、入口按钮文本
                                                    .box-item
                                                        .row
                                                            .col-lg-8
                                                                p 用户访问接入网站的时候提示用户操作的文本内容
                                                                p(style="color:#888888;font-size:13px;margin-top:10px;") 默认提示文本是：在线客服
                                                            .col-lg-4
                                                                input#consult_vsitorbtn_content.layui-input(type="text", name="consult_vsitorbtn_content", value=(inviteData.consult_vsitorbtn_content ? inviteData.consult_vsitorbtn_content : '在线客服'), autocomplete="off", onkeyup="$('#consult_content').text($(this).val())", onchange="$('#consult_content').text($(this).val())")
                                                .ukefu-webim-prop
                                                    .ukefu-webim-tl(style="clear:both;") 5、延时显示
                                                    .box-item
                                                        .row
                                                            .col-lg-8
                                                                p 用户访问接入网站的时候提示用户的按钮弹出延时时间
                                                                p(style="color:#888888;font-size:13px;margin-top:10px;") 如果不设置延时时间，则页面载入即显示入口按钮
                                                            .col-lg-4
                                                                select(name="consult_vsitorbtn_display")
                                                                    option(value="0", selected=(!inviteData.consult_vsitorbtn_display || inviteData.consult_vsitorbtn_display == 0)) 无延时
                                                                        for i in [1,2,3,4,5,10]
                                                                            option(value=i * 1000, selected=inviteData.consult_vsitorbtn_display == i * 1000) #{i}秒
                                            .col-md-4(style="padding-top:50px;")
                                                #ukefu-point.ukefu-im-point(style="width: 227px;height: 200px;border-radius: 2px;padding: 70px 20px;")
                                                    -
                                                        var position = "right:10px;top:80px;";
                                                        if (inviteData.consult_vsitorbtn_position == 'left,top')
                                                            position = "left:10px;top:10px;"
                                                        else if (inviteData.consult_vsitorbtn_position == 'left,middle')
                                                            position = "left:10px;top:80px;"
                                                        else if (inviteData.consult_vsitorbtn_position == 'left,bottom')
                                                            position = "left:10px;bottom:10px;"
                                                        else if (inviteData.consult_vsitorbtn_position == 'left,top')
                                                            position = "left:10px;top:10px;"
                                                        else if (inviteData.consult_vsitorbtn_position == 'right,top')
                                                            position = "right:10px;top:10px;"
                                                        else if (inviteData.consult_vsitorbtn_position == 'right,middle')
                                                            position = "right:10px;top:80px;"
                                                        else if (inviteData.consult_vsitorbtn_position == 'right,bottom')
                                                            position = "right:10px;bottom:10px;"

                                                    #ukefu-point-theme.ukefu-theme-color(class="ukefu-point-theme" + (inviteData.consult_vsitorbtn_model ? inviteData.consult_vsitorbtn_model : '1') + " theme" + (inviteData.consult_vsitorbtn_color ? inviteData.consult_vsitorbtn_color : '1'), style="text-align:center;position: absolute;" + position)
                                                        .ukefu-im-point-text
                                                            i.layui-icon.chat-icon 
                                                            br
                                                            span#consult_content= (inviteData.consult_vsitorbtn_content ? inviteData.consult_vsitorbtn_content : '在线客服')
                                .box.default-box
                                    .box-header
                                        h3.box-title 对话框样式
                                    .box-body.ukefu-im-theme
                                        .row(style="margin-right:0px;")
                                            .col-md-8
                                                .ukefu-webim-tl 1、选择对话框颜色
                                                .box-item
                                                    .item-cnt.ukefu-im-dialog(style="display: block;")
                                                        input#consult_dialog_color(type="hidden", name="consult_dialog_color", value=(inviteData.consult_dialog_color ? inviteData.consult_dialog_color : '1'))
                                                        .ukefu-im-item.theme1(class={'ukefu-im-checked': !inviteData.consult_dialog_color || inviteData.consult_dialog_color == '1'}, data-class="theme1", data-value="1")
                                                            i.layui-icon.ukefu-im-check 
                                                        .ukefu-im-item.theme2(class={'ukefu-im-checked': inviteData.consult_dialog_color == '2'}, data-class="theme2", data-value="2")
                                                            i.layui-icon.ukefu-im-check 
                                                        .ukefu-im-item.theme3(class={'ukefu-im-checked': inviteData.consult_dialog_color == '3'}, data-class="theme3", data-value="3")
                                                            i.layui-icon.ukefu-im-check 
                                                        .ukefu-im-item.theme4(class={'ukefu-im-checked': inviteData.consult_dialog_color == '4'}, data-class="theme4", data-value="4")
                                                            i.layui-icon.ukefu-im-check 
                                                        .ukefu-im-item.theme5(class={'ukefu-im-checked': inviteData.consult_dialog_color == '5'}, data-class="theme5", data-value="5")
                                                            i.layui-icon.ukefu-im-check 
                                                        .ukefu-im-item.theme6(class={'ukefu-im-checked': inviteData.consult_dialog_color == '6'}, data-class="theme6", data-value="6")
                                                            i.layui-icon.ukefu-im-check 
                                                .ukefu-webim-tl 2、自定义LOGO （建议尺寸：220*60）
                                                .box-item(style="position: relative;padding-bottom: 40px")
                                                    - var dialog_logo=inviteData.consult_dialog_logo ? ('/res/image.html?id=' + inviteData.consult_dialog_logo) : '/images/logo2.png';
                                                    span.ukefu-logo
                                                        img#webim_show(src=dialog_logo, style="height:40px;")
                                                    .layui-box.layui-upload-button(style="position:absolute;left: 300px;")
                                                        input#webimlogo.layui-upload-file(type="file", name="webimlogo", accept="image/gif, image/jpeg, image/png", lay-ext="jpg|png|gif", onchange="$('#logo_img').html($(this).val()); $('.webim_close').show();")
                                                        span.layui-upload-icon
                                                            i.layui-icon 
                                                            | 上传图片
                                                    div(style="margin-top: 20px;position: relative")
                                                        span#logo_img(style="float: left")
                                                        i.layui-icon.webim_close(style="display: none;float: left;margin-top: -5px;cursor:pointer;", onclick=" $('#logo_img').html(''); $('#webim_show').attr('src','" + dialog_logo + "'); $('.webim_close').hide() ;clearWebimlogs()") ဆ
                                                .ukefu-webim-tl 3、自定义客服图标 （建议尺寸：80*80）
                                                .box-item(style="position: relative;padding-bottom: 40px")
                                                    - var dialog_headimg = inviteData.consult_dialog_headimg?('/res/image.html?id='+inviteData.consult_dialog_headimg):'/images/agent.png';
                                                    span.ukefu-logo
                                                        img#agent_show(src=dialog_headimg, style="height:40px;")
                                                    .layui-box.layui-upload-button(style="position:absolute;left: 300px;")
                                                        input#agentheadimg.layui-upload-file(type="file", name="agentheadimg", accept="image/gif, image/jpeg, image/png", lay-ext="jpg|png|gif", onchange="$('#agent_img').html($(this).val()); $('.agent_close').show()")
                                                        span.layui-upload-icon
                                                            i.layui-icon 
                                                            | 上传图片
                                                    div(style="margin-top: 20px;position: relative;")
                                                        span#agent_img(style="float: left")
                                                        i.layui-icon.agent_close(style="display: none;float: left;margin-top: -5px;cursor:pointer;", onclick=" $('#agent_img').html('');$('#agent_show').attr('src','" + dialog_headimg + "');clearAgentheadimg(); $('.agent_close').hide()") ဆ
                                            .col-md-4
                                                #pv.ukefu-im-preview.ukefu-im-preview-dialog
                                                    .ukefu-im-preview-wrap(style="border:1px solid #EAEAEA")
                                                        - var color_theme="theme" + (inviteData.consult_dialog_color ? inviteData.consult_dialog_color : '1');
                                                        .ukefu-im-preview-bar.ukefu-theme-color(class=color_theme, style="padding:5px;")
                                                            img(src=dialog_logo, style="height:22px;float:left;")
                                                            span(style="float:right;")
                                                                i.layui-icon(style="font-size:12px;color:#ffffff;") ဆ
                                                        .ukefu-im-preview-tip
                                                        .ukefu-im-preview-tip(style="width:70%;height:5px;")
                                                        .ukefu-im-preview-customer
                                                            i.layui-icon(style="color:#377FED;float:left;") 
                                                            .ukefu-im-preview-customer-message.ukefu-im-preview-customer-arrow
                                                        .ukefu-im-preview-user
                                                            img(src=dialog_headimg, style="height:20px;float:right;")
                                                            .ukefu-im-preview-user-message.ukefu-im-preview-user-arrow.ukefu-theme-color(class=color_theme, style="width:150px;")
                                                        .ukefu-im-preview-user(style="height:60px;")
                                                            img(src=dialog_headimg, style="height:20px;float:right;")
                                                            .ukefu-im-preview-user-message.ukefu-im-preview-user-arrow.ukefu-theme-color(class=color_theme, style="width:100px;height:50px;")
                                                        .ukefu-im-preview-hr
                                                        .ukefu-im-preview-submit
                                                            i.fa.fa-image(style="color:#dddddd;float:left;")
                                                        .ukefu-im-preview-submit
                                                            a.ukefu-im-theme-submit-btn.ukefu-theme-color(class=color_theme) 发送
                    .row
                        .col-lg-3
                        .col-lg-9
                            .layui-form-item
                                .layui-input-block
                                    button.layui-btn(lay-submit="", lay-filter="formDemo") 保存
                                    button.layui-btn.layui-btn-original(type="reset") 重置


    script(language="javascript").
        function clearWebimlogs() {
            webimlogo.outerHTML = webimlogo.outerHTML;
        }
        function clearAgentheadimg() {
            agentheadimg.outerHTML = agentheadimg.outerHTML;
        }
        layui.use('upload', function () {
            var target = $(this).attr("data-target");
        });
        layui.use('form', function () {
            var form = layui.form();
            form.render('select'); //刷新select选择框渲染
        });
        layui.use('element', function () {
            var element = layui.element();
        });
        $(document)
            .ready(
                function () {
                    $('.ukefu-im-dialog .ukefu-im-item')
                        .click(
                            function () {
                                var theme = $(this).attr(
                                    'data-class');
                                $('#pv .ukefu-theme-color')
                                    .each(
                                        function () {
                                            $(this)
                                                .removeClass(
                                                    "theme1 theme2 theme3 theme4 theme5 theme6")
                                                .addClass(
                                                    theme);
                                        });
                                $('.ukefu-im-dialog .ukefu-im-item')
                                    .removeClass(
                                        'ukefu-im-checked');
                                $(this).addClass('ukefu-im-checked');
                                $('#consult_dialog_color').val($(this).attr('data-value'));
                            });
                    $('.ukefu-im-ping-color .ukefu-im-item')
                        .click(
                            function () {
                                var theme = $(this).attr(
                                    'data-class');
                                $('#ukefu-point .ukefu-theme-color')
                                    .each(
                                        function () {
                                            $(this)
                                                .removeClass(
                                                    "theme1 theme2 theme3 theme4 theme5 theme6")
                                                .addClass(
                                                    theme);
                                        });
                                $('.ukefu-im-ping-color .ukefu-im-item')
                                    .removeClass(
                                        'ukefu-im-checked');
                                $(this).addClass('ukefu-im-checked');
                                $('#consult_vsitorbtn_color').val($(this).attr('data-value'));
                            });
                    $('.ukefu-im-point')
                        .click(
                            function () {
                                $("#ukefu-point-theme")
                                    .removeClass(
                                        "ukefu-point-theme1 ukefu-point-theme2 ukefu-point-theme3 ukefu-point-theme9")
                                    .addClass(
                                        $(this)
                                            .attr(
                                                'data-class'));
                                $('.ukefu-im-point').removeClass(
                                    "ukefu-point-checked");
                                $(this)
                                    .addClass(
                                        "ukefu-point-checked");
                                $('#consult_vsitorbtn_model').val($(this).attr('data-value'));
                            });
                });
